<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="../inner/head.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link type="text/css" rel="stylesheet" href="${basepath}/res/images/style.css" />
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
	width: 100%;
}
</style>
<script>
	function showPic(id){
		$("span[name='menu']").each(function() {
    		if($(this).attr("id") == "st"+id) {
	  			$(this).css("font-weight", "bold");
				$(this).css("font-size", "14px"); 
			} else {
	  			$(this).css("font-weight", "");
				$(this).css("font-size", ""); 
			}
		});	
		
		$("div[name='pic']").each(function() {
    		if($(this).attr("id") == "pic"+id) {
	  			$(this).css("display", "block"); 
			} else {
	  			$(this).css("display", "none"); 
			}
		});	
	}
	
	function prePic(){
		if(parseInt($("#pageNo").val())==0)
			return false
		else{
			showPic(parseInt($("#pageNo").val())-1);
			$("#pageNo").val(parseInt($("#pageNo").val())-1);
		}
	}
	
	function nextPic(){
		if(parseInt($("#pageNo").val())==${fn:length(productpath)-1})
			return false
		else{
			showPic(parseInt($("#pageNo").val())+1);
			$("#pageNo").val(parseInt($("#pageNo").val())+1);
		}
	}
	
	function gotoPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	function firstPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	function lastPic(id){
		showPic(id);
		$("#pageNo").val(id);
	}
	
	$(document).ready(function() {
		if(${fn:length(productpath)>1})
			showPic(0);
  	});
</script>
<body>
	<div class="bg">
	<div class="container">
		<%@include file="top.jsp" %>
		<div id="list">
			<%@include file="product/left.jsp" %>
			<%@include file="product/detail.jsp" %>
		</div>
	  	<%@include file="tail.jsp" %>
	</div>
	</div>
</body>
